<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index1.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../css/goodsAll.css">
    <link rel="stylesheet" href="../css/goods_search.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/index1.js"></script>

</head>

<body>
    <div class="ding">
        <div class="top">
            <div class="top_left">
                <a href="">小米商城</a>
                <span class="sep">|</span>
                <a href="">MIUI</a>
                <span class="sep">|</span>
                <a href="">IOT</a>
                <span class="sep">|</span>
                <a href="">云服务</a>
                <span class="sep">|</span>
                <a href="">天星数科</a>
                <span class="sep">|</span>
                <a href="">有品</a>
                <span class="sep">|</span>
                <a href="">小爱开放平台</a>
                <span class="sep">|</span>
                <a href="">企业团购</a>
                <span class="sep">|</span>
                <a href="">资质证照</a>
                <span class="sep">|</span>
                <a href="">协议规则</a>
                <span class="sep">|</span>
                <a href="">下载APP</a>
                <span class="sep">|</span>
                <a href="">智能生活</a>
                <span class="sep">|</span>
                <a href="">Select Location</a>
            </div>
            <div class="top_right">
                <a href="../html/shoppingcar.html" class="buycar">
                    <em>🛒</em>
                    <em>购物车</em>
                    <!-- <em>(0)</em> -->
                </a>
            </div>
            <div class="top_middle">
                <div href="" class="top_login">
                    <span>登录</span>
                    <div class="top_login_hide">
                        <p>个人中心</p>
                        <p>评价晒单</p>
                        <p>我的喜欢</p>
                        <p>小米账户</p>
                        <p class="exit">推出登录</p>
                    </div>
                </div>
                <span class="sep">|</span>
                <a href="./regist.html" class="top_regist">
                    注册
                </a>
                <span class="sep">|</span>
                <a href="">消息通知</a>
            </div>
        </div>
    </div>
    <div class="shang">
        <div class="container">
            <div class="header_logo">
                <a href="../html/index.html"><img src="../images/logo-mi2.png" alt=""></a>
            </div>
            <ul class="header_nav">
                <li>
                    小米手机
                </li>
                <li>
                    Redmi红米
                </li>
                <li>
                    电视
                </li>
                <li>
                    笔记本
                </li>
                <li>
                    平板
                </li>
                <li>
                    家电
                </li>
                <li>
                    路由器
                </li>
                <li>
                    智能硬件
                </li>
                <li>
                    服务
                </li>
                <li>
                    社区
                </li>
                <div class="header_nav_hide">
                    <ul class="mi_phone">

                    </ul>
                    <ul class="mi_redmi">

                    </ul>
                    <ul class="mi_tv">

                    </ul>
                    <ul class="mi_book">

                    </ul>
                    <ul class="mi_pad">

                    </ul>
                    <ul class="mi_jiadian">

                    </ul>
                    <ul class="mi_luyouqi">

                    </ul>
                    <ul class="mi_ai">

                    </ul>
                    <!-- <ul>
                        <li>9</li>
                        <li>9</li>
                        <li>9</li>
                        <li>9</li>
                        <li>9</li>
                        <li>9</li>
                    </ul>
                    <ul>
                        <li>10</li>
                        <li>10</li>
                        <li>10</li>
                        <li>10</li>
                        <li>10</li>
                        <li>10</li>
                    </ul> -->
                </div>
            </ul>
            <div class="header_search">
                <div>
                    <input type="search" name="" id="search">
                    <span class="search_logo"><i class="iconfont icon">&#xe647</i></span>
                    <div class="search_show">
                        <ul>
                            <li>全部商品</li>
                            <li>小米11</li>
                            <li>手机</li>
                            <li>空调</li>
                            <li>小米11S</li>
                            <li>净水器</li>
                            <li>红米</li>
                            <li>洗衣机</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="is_login">
        为方便您购买，请提前登录 &emsp;<a href="../html/regist.html">立即登录</a> <span class="is_login_close">×</span>
    </div>

    <div class="goodsAll beyond_eip">

    </div>

    <div class="fenye">
        <div class="fenye_one">
            <div class="prev">
                上一页
            </div>
            <div class="now">
                <span class="start"> 1</span> / <span class="end">  20</span>
            </div>
            <div class="next">
                下一页
            </div>
        </div>
    </div>
    <div style="margin-top: 20px; height: 30px;">

    </div>


</body>
<script src="../js/index1.js"></script>

<script>
    if (getCookie("id")) {
        $(".is_login").css({
            display: "none"
        })
    }

    $(".is_login_close").click(function() {
        $(this).parent().css({
            display: "none"
        })
    })



    var str = location.href;
    var arr = decodeURIComponent(str.split("?")[1]);
    console.log(arr);


    var index = $(".start").text() * 1;
    $.post("../php/goods_search_show.php", {
        search: arr,
        index: index
    }, function(data) {
        var result = JSON.parse(data);
        var {
            list,
            maxpage
        } = result;
        var html = "";
        list.forEach(({
            gid,
            imgid,
            price,
            title
        }) => {
            html += ` 
            <div data-id="${gid}">
                <p><img src = "${imgid}" alt = "" > </p> 
                    <p>${title}</p>
                    <p>${price}元</p>
            </div>`
        });
        $(".goodsAll").html(html);
        $(".end").text(maxpage);
    })


    $(".prev").click(function() {
        if (index > 1) {
            index--;
        }
        $(".start").text(index);
        $.post("../php/goods_search_show.php", {
            search: arr,
            index: index
        }, function(data) {
            var result = JSON.parse(data);
            var {
                list
            } = result;
            var html = "";
            list.forEach(({
                gid,
                imgid,
                price,
                title
            }) => {
                html += ` 
            <div data-id="${gid}">
                <p><img src = "${imgid}" alt = "" > </p> 
                    <p>${title}</p>
                    <p>${price}元</p>
            </div>`
            });
            $(".goodsAll").html(html);
        })
    })


    $(".next").click(function() {
        index++;
        if (index > $(".end").text()) index = $(".end").text();
        $(".start").text(index);
        $.post("../php/goods_search_show.php", {
            search: arr,
            index: index
        }, function(data) {
            var result = JSON.parse(data);
            var {
                list
            } = result;
            var html = "";
            list.forEach(({
                gid,
                imgid,
                price,
                title

            }) => {
                html += ` 
            <div data-id="${gid}">
                <p><img src = "${imgid}" alt = "" > </p> 
                    <p>${title}</p>
                    <p>${price}元</p>
            </div>`
            });
            $(".goodsAll").html(html);
        })
    })








    $(".goodsAll").on("mouseenter", "div", function() {
        $(this).addClass("current").children(".goodsAll p:nth-child(2)").css({
            color: "#ff6700"
        });
    })
    $(".goodsAll").on("mouseleave", "div", function() {
        $(this).removeClass("current").children(".goodsAll p:nth-child(2)").css({
            color: "#757575"
        });
    })
    $(".goodsAll").on("click", "div", function() {
        var gid = $(this).attr("data-id");
        location.href = "../html/detail.html?gid=" + gid;
    })
</script>

<!-- <script>
    $(".is_login_close").click(function() {
        $(this).parent().css({
            display: "none"
        })
    })

    $(".detail_right_select_type div").click(function() {
        $(this).css({
            color: "#ff6700",
            border: "1px solid #ff6700"
        }).siblings().css({
            color: "#757575",
            border: "1px solid #e0e0e0"
        })
    })
    $(".detail_right_select_color div").click(function() {
        $(this).css({
            color: "#ff6700",
            border: "1px solid #ff6700"
        }).siblings().css({
            color: "#757575",
            border: "1px solid #e0e0e0"
        })
    })
    $(".detail_right_select_add").bind({
        //移入购物车bgc变
        mouseover: function() {
            $(this).css({
                backgroundColor: "#f25807"
            })
        },
        mouseleave: function() {
            $(this).css({
                backgroundColor: "#ff6700"
            })
        }
    })

    $(".detail_right_select_add").click(function() {
        //点击购物车
    })

    var num = $(".detail_right_select_num .num").text() * 1;

    $(".detail_right_select_num").on("click", ".add ", function() {
        num++;
        $(this).prev().text(num);
    })
    $(".detail_right_select_num").on("click", ".reduce ", function() {
        if (num > 1) {
            num--;
            $(this).next().text(num);
        }
    })
</script> -->

</html>